<form [formGroup]="formGroup()" class="form-group edit-form">
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.BASE.BASE'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ID">ID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'UNIQUE_ID' | translate: { ENTITY: 'spell' }"></i>
        <input [formControlName]="'ID'" id="ID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="Category">Category</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.CATEGORY' | translate"></i>
        <input [formControlName]="'Category'" id="Category" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellDescriptionVariableID">SpellDescriptionVariableID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_DESCRIPTION_VARIABLE_ID' | translate"></i>
        <input
          [formControlName]="'SpellDescriptionVariableID'"
          id="SpellDescriptionVariableID"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="BaseLevel">BaseLevel</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.BASE_LEVEL' | translate"></i>
        <input [formControlName]="'BaseLevel'" id="BaseLevel" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellLevel">SpellLevel</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_LEVEL' | translate"></i>
        <input [formControlName]="'SpellLevel'" id="SpellLevel" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="MaxLevel">MaxLevel</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MAX_LEVEL' | translate"></i>
        <input [formControlName]="'MaxLevel'" id="MaxLevel" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="MinFactionID">MinFactionID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MIN_FACTION_ID' | translate"></i>
        <input [formControlName]="'MinFactionID'" id="MinFactionID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="MinReputation">MinReputation</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MIN_REPUTATION' | translate"></i>
        <input [formControlName]="'MinReputation'" id="MinReputation" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellDifficultyID">SpellDifficultyID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_DIFFICULTY_ID' | translate"></i>
        <input [formControlName]="'SpellDifficultyID'" id="SpellDifficultyID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RequiredAreasID">RequiredAreasID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.REQUIRED_AREAS_ID' | translate"></i>
        <input [formControlName]="'RequiredAreasID'" id="RequiredAreasID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellClassSet">SpellClassSet</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_CLASS_SET' | translate"></i>
        <input [formControlName]="'SpellClassSet'" id="SpellClassSet" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.BASE.RESOURCES'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="PowerType">PowerType</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.PowerType"
          [disabled]="formGroup().controls.PowerType.disabled"
          [config]="{ options: SPELL_DBC_POWER_TYPE, name: 'PowerType' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.POWER_TYPE' | translate"></i>
        <input [formControlName]="'PowerType'" id="PowerType" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ManaCost">ManaCost</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MANA_COST' | translate"></i>
        <input [formControlName]="'ManaCost'" id="ManaCost" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ManaCostPerLevel">ManaCostPerLevel</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MANA_COST_PER_LEVEL' | translate"></i>
        <input [formControlName]="'ManaCostPerLevel'" id="ManaCostPerLevel" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ManaPerSecond">ManaPerSecond</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MANA_PER_SECOND' | translate"></i>
        <input [formControlName]="'ManaPerSecond'" id="ManaPerSecond" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ManaPerSecondPerLevel">ManaPerSecondPerLevel</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MANA_PER_SECOND_PER_LEVEL' | translate"></i>
        <input [formControlName]="'ManaPerSecondPerLevel'" id="ManaPerSecondPerLevel" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ManaCostPct">ManaCostPct</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MANA_COST_PCT' | translate"></i>
        <input [formControlName]="'ManaCostPct'" id="ManaCostPct" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RuneCostID">RuneCostID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.RUNE_COST_ID' | translate"></i>
        <input [formControlName]="'RuneCostID'" id="RuneCostID" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.BASE.MECHANICS'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="Mechanic">Mechanic</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.Mechanic"
          [disabled]="formGroup().controls.Mechanic.disabled"
          [config]="{ options: SPELL_MECHANIC, name: 'Mechanic' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MECHANIC' | translate"></i>
        <input [formControlName]="'Mechanic'" id="Mechanic" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="DefenseType">DefenseType</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.DefenseType"
          [disabled]="formGroup().controls.DefenseType.disabled"
          [config]="{ options: SPELL_DBC_DAMAGE_CLASS, name: 'DefenseType' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.DEFENSE_TYPE' | translate"></i>
        <input [formControlName]="'DefenseType'" id="DefenseType" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="PreventionType">PreventionType</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.PreventionType"
          [disabled]="formGroup().controls.PreventionType.disabled"
          [config]="{ options: SPELL_DBC_PREVENTION_TYPE, name: 'PreventionType' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.PREVENTION_TYPE' | translate"></i>
        <input [formControlName]="'PreventionType'" id="PreventionType" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="DispelType">DispelType</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.DispelType"
          [disabled]="formGroup().controls.DispelType.disabled"
          [config]="{ options: DISPEL_TYPE, name: 'DispelType' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.DISPEL_TYPE' | translate"></i>
        <input [formControlName]="'DispelType'" id="DispelType" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SchoolMask">SchoolMask</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SCHOOL_MASK' | translate"></i>
        <keira-flags-selector-btn
          [control]="formGroup().controls.SchoolMask"
          [disabled]="formGroup().controls.SchoolMask.disabled"
          [config]="{ flags: SPELL_DBC_SCHOOL_OPTIONS, name: 'SchoolMask' }"
        />
        <input [formControlName]="'SchoolMask'" id="SchoolMask" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RangeIndex">RangeIndex</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.RANGE_INDEX' | translate"></i>
        <input [formControlName]="'RangeIndex'" id="RangeIndex" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="MaxTargets">MaxTargets</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MAX_TARGETS' | translate"></i>
        <input [formControlName]="'MaxTargets'" id="MaxTargets" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="MaxTargetLevel">MaxTargetLevel</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.MAX_TARGET_LEVEL' | translate"></i>
        <input [formControlName]="'MaxTargetLevel'" id="MaxTargetLevel" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="CasterAuraState">CasterAuraState</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.CasterAuraState"
          [disabled]="formGroup().controls.CasterAuraState.disabled"
          [config]="{ options: SPELL_DBC_CASTER_AURA_STATE, name: 'CasterAuraState' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.CASTER_AURA_STATE' | translate"></i>
        <input [formControlName]="'CasterAuraState'" id="CasterAuraState" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ExcludeCasterAuraState">ExcludeCasterAuraState</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'TODO' | translate"></i>
        <input
          [formControlName]="'ExcludeCasterAuraState'"
          id="ExcludeCasterAuraState"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="CasterAuraSpell">CasterAuraSpell</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.CASTER_AURA_SPELL' | translate"></i>
        <input [formControlName]="'CasterAuraSpell'" id="CasterAuraSpell" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ExcludeCasterAuraSpell">ExcludeCasterAuraSpell</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'TODO' | translate"></i>
        <input
          [formControlName]="'ExcludeCasterAuraSpell'"
          id="ExcludeCasterAuraSpell"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="TargetAuraState">TargetAuraState</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.TargetAuraState"
          [disabled]="formGroup().controls.TargetAuraState.disabled"
          [config]="{ options: SPELL_DBC_TARGET_AURA_STATE, name: 'TargetAuraState' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.TARGET_AURA_STATE' | translate"></i>
        <input [formControlName]="'TargetAuraState'" id="TargetAuraState" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ExcludeTargetAuraState">ExcludeTargetAuraState</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'TODO' | translate"></i>
        <input
          [formControlName]="'ExcludeTargetAuraState'"
          id="ExcludeTargetAuraState"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="TargetAuraSpell">TargetAuraSpell</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.TARGET_AURA_SPELL' | translate"></i>
        <input [formControlName]="'TargetAuraSpell'" id="TargetAuraSpell" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ExcludeTargetAuraSpell">ExcludeTargetAuraSpell</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'TODO' | translate"></i>
        <input
          [formControlName]="'ExcludeTargetAuraSpell'"
          id="ExcludeTargetAuraSpell"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RequiresSpellFocus">RequiresSpellFocus</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.REQUIRES_SPELL_FOCUS' | translate"></i>
        <input [formControlName]="'RequiresSpellFocus'" id="RequiresSpellFocus" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="CumulativeAura">CumulativeAura</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.CUMULATIVE_AURA' | translate"></i>
        <input [formControlName]="'CumulativeAura'" id="CumulativeAura" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.BASE.COOLDOWN_CAST_TIME'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RecoveryTime">RecoveryTime</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.RECOVERY_TIME' | translate"></i>
        <input [formControlName]="'RecoveryTime'" id="RecoveryTime" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="CategoryRecoveryTime">CategoryRecoveryTime</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.CATEGORY_RECOVERY_TIME' | translate"></i>
        <input [formControlName]="'CategoryRecoveryTime'" id="CategoryRecoveryTime" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="CastingTimeIndex">CastingTimeIndex</label>
        <keira-single-value-selector-btn
          [control]="formGroup().controls.CastingTimeIndex"
          [disabled]="formGroup().controls.CastingTimeIndex.disabled"
          [config]="{ options: SPELL_DBC_CAST_TIME, name: 'CastingTimeIndex' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.CASTING_TIME_INDEX' | translate"></i>
        <input [formControlName]="'CastingTimeIndex'" id="CastingTimeIndex" type="number" class="form-control form-control-sm" />
      </div>

      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="DurationIndex">DurationIndex</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.DURATION_INDEX' | translate"></i>
        <input [formControlName]="'DurationIndex'" id="DurationIndex" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="Speed">Speed</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPEED' | translate"></i>
        <input [formControlName]="'Speed'" id="Speed" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.BASE.VISUAL'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellIconID">SpellIconID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_ICON_ID' | translate"></i>
        <input [formControlName]="'SpellIconID'" id="SpellIconID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ActiveIconID">ActiveIconID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.ACTIVE_ICON_ID' | translate"></i>
        <input [formControlName]="'ActiveIconID'" id="ActiveIconID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="StanceBarOrder">StanceBarOrder</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.STANCE_BAR_ORDER' | translate"></i>
        <input [formControlName]="'StanceBarOrder'" id="StanceBarOrder" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellVisualID_1">SpellVisualID_1</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_VISUAL_ID_1' | translate"></i>
        <input [formControlName]="'SpellVisualID_1'" id="SpellVisualID_1" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellVisualID_2">SpellVisualID_2</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_VISUAL_ID_2' | translate"></i>
        <input [formControlName]="'SpellVisualID_2'" id="SpellVisualID_2" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="SpellMissileID">SpellMissileID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.SPELL_MISSILE_ID' | translate"></i>
        <input [formControlName]="'SpellMissileID'" id="SpellMissileID" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="PowerDisplayID">PowerDisplayID</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.BASE.POWER_DISPLAY_ID' | translate"></i>
        <input [formControlName]="'PowerDisplayID'" id="PowerDisplayID" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
</form>
